<template>
  <div>
    <el-button type="primary" size="small" @click="addRelation">新增关联</el-button>
    <div v-for="(relComm, relIdx) in relatedCommands" :key="relIdx" class="mar-top-10 relation-command-container">
      <div>
        <el-button type="danger" size="small" circle icon="el-icon-delete" @click="deleteRelation(relIdx)"></el-button>
        <el-select v-model="relComm.command" size="medium" filterable clearable class="width-30 mar-lft-10"
                   placeholder="请选择关联命令">
          <el-option-group v-for="(group, idx) in relCommSelData" :key="idx" :label="group.label">
            <el-option v-for="(item, idx) in group.options" :label="item.label" :value="item.value" :key="idx">
            </el-option>
          </el-option-group>
        </el-select>
        <el-radio-group v-model="relComm.type" class="mar-lft mar-top-5">
          <el-radio :label="type.value" :key="idx"
                    v-for="(type, idx) in commonConfig.relCommType">{{type.label}}
          </el-radio>
        </el-radio-group>
        <el-button type="primary" size="small" class="float-right" @click="addParamMap(relIdx)">新增参数</el-button>
      </div>
      <div class="mar-top-10">
        <el-row>
          <el-col :span="8" class="text-align-left">
            <span class="related-command-title">等待时长</span>
            <el-input-number
              v-model="relComm.waitingTime"
              :min="0" :step="100"
              size="medium" class="mar-lft-10"
              placeholder="请填写等待时长"></el-input-number>
          </el-col>
          <el-col :span="8" class="text-align-center">
            <span class="related-command-title">执行次数</span>
            <el-input-number
              v-model="relComm.exeTimes"
              :min="1" size="medium" class="mar-lft-10"
              placeholder="请填写执行次数"></el-input-number>
          </el-col>
          <el-col :span="8" class="text-align-right">
            <span class="related-command-title">执行间隔</span>
            <el-input-number
              v-model="relComm.exeInterval"
              :min="0" :step="100"
              size="medium" class="mar-lft-10"
              placeholder="请填写执行间隔"></el-input-number>
          </el-col>
        </el-row>
      </div>
      <el-table
        class="mar-top-20 mar-btm-10"
        style="width: 100%"
        :data="relComm.paramMap"
        size="medium"
        show-header border fit>
        <el-table-column prop="srcKey" label="srcKey">
          <template slot-scope="scope">
            <el-input v-model="scope.row.srcKey" size="small" placeholder="请填写srcKey"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="storeKey" label="storeKey">
          <template slot-scope="scope">
            <el-input v-model="scope.row.storeKey" size="small" placeholder="请填写storeKey"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="listKey" label="listKey">
          <template slot-scope="scope">
            <el-input v-model="scope.row.listKey" size="small" placeholder="请填写listKey"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="destKey" label="destKey">
          <template slot-scope="scope">
            <el-input v-model="scope.row.destKey" size="small" placeholder="请填写destKey"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120px" fixed="right">
          <template slot-scope="scope">
            <el-button
              type="text" size="medium" class="font-color-success"
              @click="copyParamMap(relIdx, scope.$index)">复制
            </el-button>
            <el-button
              type="text" size="medium" class="font-color-danger"
              @click="deleteParamMap(relIdx, scope.$index)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
  import {commonConfig} from "@/config/common";
  import {commonString} from "@/config/string";
  import {confirmHandle, deepCopyWithJson} from "@/utils";

  export default {
    name: "RelatedCommand",
    props: {
      relatedCommands: {
        default: () => {
          return []
        }
      },
      relCommSelData: {
        default: () => {
          return []
        }
      },
    },
    data() {
      return {
        commonConfig: commonConfig,
      }
    },
    methods: {
      addRelation() {
        this.relatedCommands.push({
          command: '',
          type: 1,
          waitingTime: 0,
          exeTimes: 1,
          exeInterval: 0,
          paramMap: [],
        });
      },
      deleteRelation(relIdx) {
        const relation = deepCopyWithJson(this.relatedCommands[relIdx]);
        const command = this.relCommSelData.find(rc => {
          return rc._id === relation.command
        });
        if (command) {
          const confirmLabel = `确定要删除与命令 ${command.commandName || commonString.dash} 的关联?`;
          confirmHandle({label: confirmLabel}).then(() => {
            this.relatedCommands.splice(relIdx, 1);
          }).catch(() => {
          });
        } else {
          this.relatedCommands.splice(relIdx, 1);
        }
      },
      addParamMap(relIdx) {
        const relation = this.relatedCommands[relIdx];
        relation.paramMap.push({
          srcKey: '',
          destKey: '',
          storeKey: '',
          listKey: '',
        })
      },
      copyParamMap(relIdx, paramIdx) {
        const relation = this.relatedCommands[relIdx];
        if (!relation.paramMap) return;
        const src = deepCopyWithJson(relation.paramMap[paramIdx]);
        relation.paramMap.splice(paramIdx, 0, src);
      },
      deleteParamMap(relIdx, paramIdx) {
        const relation = this.relatedCommands[relIdx];
        if (!relation.paramMap) return;
        relation.paramMap.splice(paramIdx, 1);
      },
    }
  }
</script>

<style scoped>
  .relation-command-container {
    border-radius: 8px;
    background: #fafafa;
    padding: 20px;

  }

  .related-command-title {
    color: #606266;
    font-weight: bold;
  }

</style>
